import c from "./css/index.module.scss";
import { Col, Row } from "antd";
import { React, useRef, useState } from "react";
import axios from "axios";
import { Tabs, Button, Checkbox, Form, Input, notification } from "antd";

export default function Home() {
  const inputRef = useRef();
  let [flag, setState] = useState(false);
  let [xinxi, xinxiState] = useState("获取验证码");
  let [timer, settimer] = useState(32);
  let [nowyzm, setyzm] = useState("yzm");
  var fdata = new FormData();
  notification.config({
    placement: "bottomRight",
    // bottom: 280,
    // top: "10",
    bottom: 490,
    duration: 1,
  });
  const onFinish = async (values) => {
    let re = await axios.post("/passwordlogin", values);

    if (re.data.code == 2001) {
      notification["success"]({
        message: "Notification Title",
        description: "登录成功",
      });
      setTimeout(() => {
        console.log("登录成功");
        window.open("/", "_self");
      }, 1000);
    } else if (re.data.code == 4001) {
      notification["error"]({
        message: "Notification Title",
        description: "你的密码有误！",
      });
    } else {
      notification["error"]({
        message: "Notification Title",
        description: "该账号未注册",
      });
    }
  };
  const onFinish1 = async (values) => {
    console.log(values.captcha);
    console.log(nowyzm);
    if (nowyzm == values.captcha) {
      // let email = inputRef.current.input.value;
      let res = await axios.post("./login", values);
      notification["success"]({
        message: "Notification Title",
        description: "登录成功",
      });
      console.log(res);
      setTimeout(() => {
        window.open("/", "_self");
      }, 1000);
    } else {
      notification["error"]({
        message: "Notification Title",
        description: "验证码错误！",
      });
    }
  };
  const [form] = Form.useForm();

  const send = async (e) => {
    if (xinxi == "获取验证码") {
      // console.log("111111");
      notification["success"]({
        message: "Notification Title",
        description: "验证码已发送",
      });
      let email = inputRef.current.input.value;
      fdata.append("email", email);
      // console.log(email);
      let re1 = await axios.post("/sendEmail", fdata);
      setyzm(re1.data.yzm);
      let data = setInterval(() => {
        xinxiState(`请${timer - 2}秒后重试`);
        settimer(timer--);
        if (timer <= 1) {
          settimer(32);
          setState(false);
          xinxiState("获取验证码");
          clearInterval(data);
        }
      }, 1000);
    }
  };

  return (
    <div className={c["bigbox"]}>
      <div className={c["box"]}>
        <img src="https://s.kjcdn.com/groundwork/images/img-login.png" alt="" />
        <div className={c["login"]}>
          <Tabs
            defaultActiveKey="1"
            centered
            // onChange={onChange}
            items={[
              {
                label: `密码登录`,
                key: "1",
                children: (
                  <Form
                    name="normal_login"
                    className={c["login-form"]}
                    initialValues={{
                      remember: true,
                    }}
                    onFinish={onFinish}
                  >
                    <Form.Item
                      name="email"
                      label="邮箱"
                      rules={[
                        {
                          type: "email",
                          message: "请输入正确的邮箱!",
                        },
                        {
                          required: true,
                          message: "请输入邮箱!",
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item
                      name="password"
                      label="密码"
                      rules={[
                        {
                          required: true,
                          message: "请输入正确的密码!",
                        },
                      ]}
                    >
                      <Input.Password type="password" />
                    </Form.Item>
                    <Form.Item>
                      <Form.Item
                        name="remember"
                        valuePropName="checked"
                        noStyle
                        className={c["rememberbtn"]}
                      >
                        <Checkbox>记住我</Checkbox>
                      </Form.Item>
                    </Form.Item>

                    <Form.Item>
                      <Button
                        type="primary"
                        htmlType="submit"
                        className={c["login-form-button"]}
                      >
                        登录
                      </Button>
                    </Form.Item>
                  </Form>
                ),
              },
              {
                label: `验证码登录`,
                key: "2",
                children: (
                  <Form
                    form={form}
                    name="register"
                    onFinish={onFinish1}
                    scrollToFirstError
                    className={c["login-form"]}
                  >
                    <Form.Item
                      name="email"
                      label="邮箱"
                      rules={[
                        {
                          type: "email",
                          message: "请输入正确的邮箱!",
                        },
                        {
                          required: true,
                          message: "请输入邮箱!",
                        },
                      ]}
                    >
                      <Input ref={inputRef} />
                    </Form.Item>

                    <Form.Item label="验证码">
                      <Row gutter={8}>
                        <Col span={12}>
                          <Form.Item
                            name="captcha"
                            noStyle
                            rules={[
                              {
                                required: { flag },
                                message: "验证码错误!",
                              },
                            ]}
                          >
                            <Input />
                          </Form.Item>
                        </Col>
                        <Col span={1}>
                          <Button className={c["yzmbtn"]} onClick={send}>
                            {xinxi}
                          </Button>
                        </Col>
                      </Row>
                    </Form.Item>

                    <Form.Item
                      name="agreement"
                      valuePropName="checked"
                      className={c["xieyi"]}
                      rules={[
                        {
                          validator: (_, value) =>
                            value
                              ? Promise.resolve()
                              : Promise.reject(new Error("请勾选协议")),
                        },
                      ]}
                    >
                      <Checkbox>
                        我同意该协议<a href="">[协议内容]</a>
                      </Checkbox>
                    </Form.Item>
                    <Form.Item>
                      <Button
                        type="primary"
                        htmlType="submit"
                        className={c["zhucebtn"]}
                      >
                        登录
                      </Button>
                    </Form.Item>
                  </Form>
                ),
              },
            ]}
          />
        </div>
      </div>
    </div>
  );
}
